<template>
	<view class="layout">
		<view class="head">
			共{{queryParams.total}}条数据，已获取{{userList.length}}条
		</view>
		
		<input @confirm="onConfirm" type="text" class="search" v-model="keyword" placeholder="请输入搜索的内容">
		
		<view class="box" v-for="item,index in userList" :key="item._id" 
		@click="goDetail(item._id)">	
			<view>序号：{{index+1}}</view>
			<view>id：{{item._id}}</view>
			<image v-if="item.avatar" :src="item.avatar[0].url" mode="widthFix"></image>
			<view>姓名：{{item.name}}</view>
			<view>年龄：{{item.age}}</view>
			<view>性别：{{item.gender}}</view>
			<view>时间：{{item.createTime}}</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {onReachBottom} from "@dcloudio/uni-app"
//增add  查get
const db = uniCloud.database();
const queryParams = ref({
	pageNum:1,
	pageSize:7,
	total:0
})
const keyword = ref("");
const noData = ref(false);
const userList = ref([]);

const onConfirm= ()=>{
	userList.value = [];
	getData();
}

const getData = async ()=>{	              
	let current = queryParams.value.pageSize * (queryParams.value.pageNum-1);
	let res = await db.collection("demo-user")
	// .where(`name == '小明' || name=='小红'`)
	.where(`${new RegExp(keyword.value, 'i')}.test(name)`)
	.orderBy("createTime desc")
	.skip(current)
	.limit(queryParams.value.pageSize)
	.field("name,age,createTime,gender,avatar")
	.get({
		getCount:true		
	});
	console.log(res);
	if(res.result.errCode===0){
		userList.value = [...userList.value,...res.result.data];
		queryParams.value.total = res.result.count;
		if(queryParams.value.pageSize > res.result.data.length) noData.value = true;	
		
	}else{
		uni.showToast({
			title:res.result.errMsg || '返回错误',
			icon:'none'
		})
	}
	
}


const goDetail = (e)=>{
	console.log(e);
	uni.navigateTo({
		url:"/pages/demo1/detail?id="+e
	})
}



onReachBottom(()=>{
	if(noData.value) return;
	queryParams.value.pageNum++;
	getData();
})



getData();


</script>

<style lang="scss" scoped>
.layout{
	.head{
		text-align: center;
		padding:10rpx 0;
		font-size: 26rpx;
		color:#888;
	}
	.search{
		margin:30rpx;
		border:1px solid #eee;
		padding:0 20rpx;
		height: 70rpx;
	}
	.box{
		padding:15rpx 30rpx;
		border-bottom:1px solid #eee;
	}
}
</style>
